#include ("/_includes/_layout.html")
#@layout("拼团商品", "wxmall,点步科技", "Wxmall社区","wxmall")
#define css()
<link rel="stylesheet" href="#(webctx)/resources/css/product-detail.css"/>
<style>
.weui-media-box__info{
	margin-top : 0px !important;
}
</style>
<style>
.placeholder {
  /* margin: 5px;*/
  padding: 0 10px; 
  background-color: #cecece;
  height: 2em;
  line-height: 2em;
  /* text-align: center; */
  color: white;
}
.weui-cells{
	margin-top : 1px !important;
}
.weui-cell{
	padding : 2px 0px !important;
}
.weui-cells__title {
	padding-left : 1px !important;
}
.weui-media-box__info {
	margin-top: 1px !important;
}
.weui-cells:after, .weui-cells:before{
	content: none !important;
}
.weui-footer{
	padding-bottom: 100px;
}
.big-btn-2-1 .big-btn {
    width: 100%;
}
</style>
#end
#define content()
<div class="content">
<!-- 主体内容 -->
<div class="weui_tab_bd">
<!-- 	<div class="weui-flex">
      	<div class="weui-flex__item"><div class="placeholder" style="cursor: pointer;"><span id="gzAuthUser">关注公众号</span> | <span id="tgProduct">商品二维码</span> </div></div>
    </div> -->
	<!-- 此次轮播窗口大小是根据图片大小控制的,可以根据需求上传图片控制大小 -->
	<!-- 轮播图片 -->
	<div class="swiper-container custom-swiper-wrap" data-space-between='10' data-pagination='.swiper-pagination' data-autoplay="1000">
		<div class="swiper-wrapper">
			#for(image : productDetail.imageList ) 
				<div class="swiper-slide"><img src="#(image)" height="300px"></div>
			#end
		</div>
		<div class="swiper-pagination"></div>
	</div>
	<!-- /轮播图片 -->
	<!-- 商品信息 -->
	<div class="weui-panel">
        <div class="weui-panel__bd">
          <div class="weui-media-box weui-media-box_text" style="padding:15px 15px 0px 15px;">
            <h4 class="weui-media-box__title">#(productDetail.product.name??)</h4>
            
			<input type="hidden" id="descValue" value="#(multiGroup.share_intro??)"/>
			
            #if( productDetail.groupInfo??)
            <div class="weui-media-box__info">
            <span class="weui-media-box__desc"><font style="font-weight:bold;font-size: 14px;color: red;">#(productDetail.groupInfo.groupNum??)</font>
            #if( groupingInfo?? && groupingInfo.isExpires?? && groupingInfo.isExpires==false)
            <span class="timer" style="color: red">
	 			<span></span>天<span></span>小时<span></span>分<span></span>秒
	 		</span>
			<input id="db_end_timestamp" type="hidden" value="#(groupingInfo.expiresIn )"/>
            #end
            </span>
            <p class="weui-media-box__desc">拼团价:<font style="font-weight:bold;font-size: 18px;color: red;">￥#(productDetail.groupInfo.collagePrice??)</font> &nbsp;&nbsp;<s>￥#(productDetail.product.price??)</s></p>
            #else
            <p class="weui-media-box__desc" style="font-weight:bold;font-size: 18px;color: red;">￥#(productDetail.product.price??)</p>
            </div>
            #end
            <!-- 商品限时打折 -->
            #if( productDetail.promotionInfo??)
            <div class="weui-media-box__info">
            	<span class="weui-media-box__desc"><font style="font-weight:bold;font-size: 14px;color: red;">#(productDetail.promotionInfo.promotionTag??) #(productDetail.promotionInfo.promotionInfo??)</font>&nbsp;&nbsp;#(productDetail.promotionInfo.promotionTime??)</span>
            </div>
            #end
            <!-- 商品订单返现 -->
			#if( productDetail.cashback??)
			<div class="weui-media-box__info">
            	<span class="weui-media-box__desc"><font style="font-weight:bold;font-size: 14px;color: red;">#(productDetail.cashback.tag??)</font>&nbsp;&nbsp;#(productDetail.cashback.backTime??)</span>
            </div>
			#end
            <!-- 商品满减 -->
            #if( productDetail.fullCutInfo??)
            #for(fullCut : productDetail.fullCutInfo )
            	#if( fullCut_index==0)
            <div class="weui-media-box__info">
            	<span class="weui-media-box__desc"><font style="font-weight:bold;font-size: 14px;color: red;">#(fullCut.fullCutInfo??)</font>&nbsp;&nbsp;#(fullCut.fullCutTime??)</span>
            </div>
            	#end
            #end
            <ul class="weui-media-box__info">
            #for(fullCut : productDetail.fullCutInfo )
            	#if( fullCut_index!=0)
            	<li class="weui-media-box__info__meta" style="padding-top: 5px;"><span>#(fullCut.fullCutInfo??)</span></li>
            	#end
           #end
            </ul>
            #end
            <ul class="weui-media-box__info">
              <li class="weui-media-box__info__meta">剩余:<span>#(productDetail.product.stock??)</span></li>
              <li class="weui-media-box__info__meta">销量:<span>#(productDetail.product.sales??)</span></li>
              <!-- <li class="weui-media-box__info__meta weui-media-box__info__meta_extra">其它信息</li> -->
            </ul>
            #if(groupings?? && groupings.size()>0)
				<div class="weui-cells__title">他们正在开团</div>
		        <div class="weui-cells" style="font-size: 14px;">
		        	#for(gup : groupings)
		        	<div class="weui-cell">
			            <div class="weui-cell__hd"><img src="#(gup.groupHeaderImg??)" alt="" style="width:40px;display:block;border-radius:50%;"></div>
			            <div class="weui-cell__bd" style="font-size: 12px;">
			              	<p>#(gup.groupHeader??)</p>
			              	<p>还差#(gup.diffUserCount??)人成团</p>
			              #if( gup.isExpires?? && gup.isExpires==false)
							<span class="timer" style="color: red"><span></span>天<span></span>小时<span></span>分<span></span>秒</span>
							<input type="hidden" value="#(gup.expiresIn )"/>			              
			              #end
			            </div>
			            <div class="weui-cell__ft"><a href="#(webctx)/product/join/?productId=#(productDetail.product.id??)&groupId=#(gup.groupId??)">立即参团</a></div>
			        </div>
		        	#end
		        </div>            
            #end
          </div>
        </div>
    </div>
	<div class="weui-cells">
        <div class="weui-cell weui-cell_access" style="font-size: 14px;padding :0px 15px !important">
          <div class="weui-cell__bd"><p>#(session.appUser.nick_name??)</p></div>
          <div class="weui-cell__ft"><a href="#(webctx)/">进入店铺</a></div>
        </div>
	</div>          
	<div class="weui-panel weui-panel_access goods-details">
		<div class="weui-tab">
		  	<div class="weui-navbar">
			    <a id="a_detail" href="#div_detail" class="weui-navbar__item weui-bar__item--on">商品详情</a>
			    <a id="a_reviews" href="#div_review" class="weui-navbar__item">
			      	累计评价(#if( reviews??) #(reviews.size()) #else 0 #end)
			    </a>
		  	</div>
		  	<div class="weui-tab__bd">
				<div id="div_detail" class="weui-media-box weui-media-text">
					<p class="weui_media_desc">#if( productDetail.product.introduction??)#(productDetail.product.introduction)#end</p>
				</div>
				<div id="div_review" class="weui-tab__bd-item" style="padding: 10px 0px;">
					#if( reviews?? && reviews.size()>0)
						#for(rv : reviews)
						<div class="mmq-list">
				          <div class="header-pic"><img class="lazy"  src="#(rv.headimgurl)" style="display: inline;"></div>
				          <div class="mmq-info">
				            <div class="tit tab">
				              <span class="name">#(rv.nickname??)</span>  
				            </div>
				            <div class="txt">#(rv.content??)</div>
				            <div class="mmq-pri-day"><span class="day"><em class="txt-yel">#(rv.created??)</em></span></div>
				          </div>
				        </div>    
					    #end
					#else
					<div id="div_review" class="weui-media-text" style="text-align: center;">
						没有评价
					</div>	
					#end
				</div>
			</div>
		</div>
	</div>
	<!-- /商品信息 -->
</div>
<!-- /主体内容 -->
<!-- 底部导航 -->
<div class="weui-tabbar toolbar-bottom">
 	<div class="big-btn-2-1">
 		 <a href="javascript:void(0);" class="big-btn orange-btn add-shopping-cart" style="color: white;">原价购买</a>
 	</div> 
    <div class="big-btn-2-1">
       #if( groupingInfo?? && groupingInfo.isGrouped?? && groupingInfo.isGrouped==true)
       <a href="javascript:void(0);" class="big-btn red-btn to-show" style="color: white;">邀请加团</a>
       #else if( groupingInfo?? && groupingInfo.isExpires?? && groupingInfo.isExpires==true)
       <a href="javascript:void(0);" class="big-btn red-btn" style="color: white;">已结束</a>
       #else if( !groupingInfo??)
       <a href="javascript:void(0);" class="big-btn red-btn purchase" style="color: white;">我要开团</a>
       #else
       <a href="javascript:void(0);" class="big-btn red-btn purchase" style="color: white;">立即参团</a>
       #end
    </div>
</div>
<!-- 底部导航 -->
</div>

<!-- 弹出浮层 -->
<div id="half" class="weui-popup__container weui-popup-overlay popup-bottom" style="z-index: 1000">
      <div class="weui-popup__overlay"></div>
      <div class="weui-popup__modal">
        <div class="content">
	        <div class="weui-panel weui-panel_access">
	        <!-- 新样式-->	
			 <div class="sku-layout-title name-card sku-name-card">
			        <div class="thumb">
			        <img class="js-goods-thumb goods-thumb" src="#(img_domain)#(productDetail.product.image)" alt="">
			        </div>
					<div class="detail goods-base-info">
					    <p class="title c-black ellipsis">#(productDetail.product.name)</p>
					      <div class="goods-price">
					         <div class="current-price pull-left c-black">
					            <i class="js-goods-price price font-size-16 vertical-middle c-orange">
					            #if( productDetail.promotionInfo??)
					            <b class="sys_item_promprice">#(productDetail.promotionInfo.promotionPrice??)</b>
					            #end
					            #if( productDetail.groupInfo??)
					            <b class="sys_item_groupprice">#(productDetail.groupInfo.collagePrice)</b>
					            #end
					            #if( productDetail.groupInfo?? || productDetail.promotionInfo??)
					            <s class="sys_item_price" style="font-size: 9px;color: gray;">#(productDetail.product.price)</s>
					            #end
					            #if( !productDetail.promotionInfo??)
					            <b class="sys_item_price_b">#(productDetail.product.price)</b>
					            #end
					            </i>
					         <span class="price-name pull-left font-size-16 c-orange" style="font-size: 12px;">#if( productDetail.product.stock??)剩余:<b class="sys_item_stock">#(productDetail.product.stock)</b>#end</span>
					        </div>
					    </div>
					</div>
					<div class="js-cancel sku-cancel">
					    <a href="javascript:void(0);" class="close-popup"><i class="weui-icon-cancel"></i></a>
					</div>
			  </div>
			</div>
        </div>
        <div class="content-padded weui-panel__bd goods-details items">
				#if(productDetail.specifications??)
					#for(sf : productDetail.specifications)
					<div class="weui-form-preview__item">
						<div class="weui-form-preview__label weui-media-box__hd" data-id="#(sf.specification.id)">
							<font size="2">#(sf.specification.name)：</font>
						</div>
						<br/>
						<ul class="weui-form-preview__value app-image-list">
							#for(sfv : sf.specificationValues)
								<li class="goods-style gs_#(sf.specification.id)" data-sf-id="#(sf.specification.id)" data-id="#(sfv.id)"><span>#(sfv.name)</span></li>
							#end					
						</ul>
					</div>	
					#end
				#end
				#if(!productDetail.product.stock??)
				<div class="weui-media-box weui-media-box_appmsg">
					<div class="weui-panel__bd">
						<font size="2">已售罄</font>
					</div>
				</div>
				#else
					<div class="weui-form-preview__item">
						<div class="weui-form-preview__label weui-media-box__hd">
							<font size="2">购买数量:</font>
						</div>
						<div class="weui-form-preview__value  count">
							<a id="minus-count" href="javascript:void(0);">-</a>
							<input id="number" type="tel" maxlength="6" value="1"/>
							<a id="add-count" href="javascript:void(0);">+</a>
						</div>
					</div>
				#end
		</div>
	    <div class="content-padded" style="padding-bottom: 10px;">
	    	<p class="weui_btn_area">
	      		<a href="javascript:void(0)" class="weui-btn weui-btn_primary d_confirm_btn">确定</a>
	    	</p>
	  	</div>
	</div>
</div>

<!-- <div id="full_gongzhonghao" class="weui-popup__container weui-popup-overlay popup-bottom" style="z-index: 1000">
      <div class="weui-popup__overlay"></div>
      <div class="weui-popup__modal">
        <div class="weui-msg">
	      <div class="weui-msg__icon-area" style="text-align: -webkit-center"><img alt="" width="200" height="200" src="#(appUser.qrcode_url??)"></div>
	      <div class="weui-msg__text-area">
	        <h2 class="weui-msg__title">#(appUser.nick_name??)</h2>
	        <p class="weui-msg__desc" style="color: red;"><strong>长按二维码关注公众号</strong></p>
	      </div>
	    </div>
        <a href="javascript:void(0);" class="weui-btn weui-btn_primary close-popup" style="margin-bottom: 5px;margin-left: 5px;margin-right: 5px;">关闭</a>
      </div>
</div> -->
<div id="full_product" class="weui-popup__container weui-popup-overlay popup-bottom" style="z-index: 1000;">
      <div class="weui-popup__overlay"></div>
      <div class="weui-popup__modal">
        <div class="weui-msg">
	      <div class="weui-msg__icon-area" style="text-align: -webkit-center"><img alt="" width="200" height="200"src="#(followsQrcode)"></div>
	      <div class="weui-msg__text-area">
	        <p class="weui-msg__desc" style="color: red;"><strong>关注公众号，立即开始拼团</strong></p>
	      </div>
	    </div>
        <a href="javascript:void(0);" class="weui-btn weui-btn_primary close-popup" style="margin-bottom: 5px;margin-left: 5px;margin-right: 5px;">关闭</a>
      </div>
</div>
<!--手机端script需要加载后方-->
#end
<script type="text/javascript" src="#(webctx)/resources/js/timer.js"></script>
<script type="text/javascript">
var quotaLimit = "#(productDetail.groupInfo.quota)";//每人限购数
var sys_item;
var productPrice="#(productDetail.product.price??)";
var productStock="#(productDetail.product.stock??)";
var price="";	  	//原价
var promPrice="";	//折扣价
var groupPrice="";	//拼团价
var stock='';
var flag = 1;//原价购买
//ajax请求价格、库存
function getPrice(){
	$.ajax({
		type: "post",
		url: "#(webctx)/product/stocks",
		data: {productId:#(productDetail.product.id)},
		async: true,
		success: function(resp){
			if(resp.code!=200){
				$.alert(resp.msg);
				return;
			}
			sys_item=resp.data;
		}
	});
}
function getAttrPrice(){
	var defaultstats=true;
	var _val='';
	$("ul.app-image-list .goods-style").each(function(){
		 var i=$(this);
         var v=i.attr("data-attrval");
         if(!v){
             defaultstats=false;
         }else{
             _val+=_val!=""?",":"";
             _val+=v;
         }
	});
	if($("ul.app-image-list .goods-style").length==1){
		 defaultstats=false;
	}
	price=productPrice;
	stock=productStock;
	if(!defaultstats){
		$.each(sys_item, function(key,item){
			if(key == _val){
				price=item.price;
				stock=item.stock;
				if(item.collagePrice !=null && item.collagePrice !="")
					groupPrice = item.collagePrice;
				if(item.promPrice !=null && item.promPrice !="")
					promPrice = item.promPrice; 
				return;
			}
		});
	}
	$(".sys_item_price").text(price);
	$(".sys_item_price_b").text(price);
	$(".sys_item_stock").text(stock);
	if(promPrice != null  && promPrice !=""){
		$(".sys_item_promprice").text(promPrice);
	}
	if(groupPrice != null && groupPrice !=""){
		$(".sys_item_groupprice").text(groupPrice);
	}
}
$(function() {
	$(".weui-navbar__item").click(function(){
		$(".weui-navbar__item").each(function(){
			$(this).removeClass("weui_bar__item_on");
		});
		var me = $(this);
		me.addClass("weui_bar__item_on");
		if(me.attr("id") == "a_detail"){
			$("#div_detail").show();
			$("#div_review").hide();
		}else {
			$("#div_detail").hide();
			$("#div_review").show();
		}
	});
	//全选
	$(".swiper-container").swiper({
		speed: 300,
		loop: true,
		autoplay: 3000
	});
	//计算数量
	var number = $("#number");
	//数量加一
	$("#add-count").click(function(){
		var n = parseInt(number.val())+1;
		if(flag == 0 && quotaLimit !=null && quotaLimit != ""){
			if(n> quotaLimit){
				showMsg("拼团每人限购"+quotaLimit+"件");
				return;
			}
		}
		number.val(n);
	});
	//数量减一
	$("#minus-count").click(function(){
		number.val(parseInt(number.val()) > 1 ? parseInt(number.val())-1 : 1);
	});
	//判断手机输入是否为数字
	number.bind("input propertychange",function(){
		if(isNaN($(this).val())){
			$(this).val(1);
		}
	});
	//款式选择效果
	$("ul.app-image-list .goods-style").click(function(){
		var sfid = $(this).attr("data-sf-id");
		$("ul.app-image-list .goods-style").each(function(){
			if(sfid == $(this).attr("data-sf-id")){
				$(this).removeClass("active");	
				$(this).removeAttr("data-attrval");
			}
		});
		if($(this).hasClass("active")){
			$(this).removeClass("active");
			$(this).removeAttr("data-attrval");
		}else{
			$(this).addClass("active");
			$(this).attr("data-attrval",$(this).attr("data-id"));
		}
		
		getAttrPrice();
	});
	//原价购买
	$(".add-shopping-cart").click(function(){
		flag=1;
		/* $("ul.app-image-list .goods-style").each(function(){
			$(this).removeClass("active");	
			$(this).removeAttr("data-attrval");
		}); */
		//隐藏团购价，显示原价
		$(".sys_item_promprice").show();
		$(".sys_item_price_b").show();
		$(".sys_item_groupprice").hide();
		$(".sys_item_price").hide();
		//弹出款式选择框
		$("#half").popup();
		getAttrPrice();
	});
	//去分享
	$(".to-show").click(function(){
		/* $.actions({
			actions: [{
			    text: "点击右上角分享",
			    className: "color-primary",
			    onClick: function() {
			    }
			})
		}); */
		showMsg("点击右上角分享");
	});
	//拼团购买
	$(".purchase").click(function(){
		flag=0;
		/* $("ul.app-image-list .goods-style").each(function(){
			$(this).removeClass("active");	
			$(this).removeAttr("data-attrval");
		}); */
		//判断是否需要关注才能开团
		#if(followsQrcode??)
			$("#full_product").popup();
			return;
		#end	
		//隐藏原价，显示团购价
		$(".sys_item_promprice").hide();
		$(".sys_item_groupprice").show();
		$(".sys_item_price_b").hide();
		$(".sys_item_price").show();
		$("#half").popup();
		getAttrPrice();
	});
	$(".d_confirm_btn").click(function(){
		#if( productDetail.specifications??)
		var speciLen = #(productDetail.specifications.size());
		#else
		var speciLen = 0;
		#end
		var speciStr = "";
		if(speciLen > 0){
			var specificationArray = new Array();
			//获取规格数据
			$(".items .goods-style").each(function(){
				if($(this).hasClass("active")){
					var entity = new Object();
					entity.sfId = $(this).attr("data-sf-id");
					entity.spvId = $(this).attr("data-id");
					specificationArray.push(entity);
				}
			});
			if(specificationArray.length <=0){
				showMsg("请选择商品规格");
				return;
			}
			if(specificationArray.length != speciLen){
				showMsg("请选择完整规格");
				return;
			}
			speciStr = JSON.stringify(specificationArray);
		}
		//获取商品数量
		var quantity = $("#number").val();
		if(quantity == null || quantity<=0){
			showMsg("商品数量必须大于0");
			return;
		}
		var itemsArray = new Array();
		var entity = new Object();
		entity.productId = #(productDetail.product.id);
		entity.pcount = $("#number").val();
		entity.speci = speciStr;				
		itemsArray.push(entity);
		if(flag == 1){
			//原价购买
			location.href = "#(webctx)/pay/balance?items="+JSON.stringify(itemsArray);
		}else{
			if(quotaLimit !=null && quotaLimit != ""){
				if(quantity> quotaLimit){
					showMsg("拼团每人限购"+quotaLimit+"件");
					return;
				}
			}
			//拼团购买
			#if( groupingInfo??)
			location.href = "#(webctx)/pay/gbalance?groupId=#(groupingInfo.groupId)&items="+JSON.stringify(itemsArray);
			#else
			 location.href = "#(webctx)/pay/gbalance?items="+JSON.stringify(itemsArray);
			#end
		}
	});
});

$("#gzAuthUser").click(function(){
	$("#full_gongzhonghao").popup();
});
function getAllImg() {
    var aa = [];
    var i = 0;
    var src = [];
    aa = $("img");
    for (i = 0; i < aa.length; i++) {
    	if(aa[i].id !="_cart"){
            var imgsrc = aa[i].src;
            src[i] = imgsrc;  //把所有的src存到数组里    		
    	}
    }
    return src;
}
$("img").click(function(){
	if($(this).attr("id") != "_cart"){
		var imgsrc = $(this).attr('src');
	    wx.previewImage({
	        current: imgsrc, // 当前显示图片的http链接
	        urls: getAllImg() // 需要预览的图片http链接列表
	    });
	}
});

$().ready(function() {
	getPrice();
	var descValue = $("#descValue").val().replace(/[\r\n]/g,"");

	//自定义“分享给朋友”及“分享到QQ”按钮的分享内容（1.4.0） #(session._buyerUser.open_id)
	wx.updateAppMessageShareData({ 
        title: '#(multiGroup.detail_title)', 
        desc: descValue, 
	    link: '#(webctx)/product/detail?id=#(product.id??)&groupId=#(groupingInfo.groupId??)', // 分享链接
	    imgUrl: '#(img_domain)#(productDetail.product.image)', // 分享图标
        success: function () {
        	// 设置成功
        }
	})
	
	//自定义“分享到朋友圈”及“分享到QQ空间”按钮的分享内容（1.4.0）
	wx.updateTimelineShareData({ 
        title: '#(multiGroup.detail_title)', // 分享标题
	    link: '#(webctx)/product/detail?id=#(product.id??)&groupId=#(groupingInfo.groupId??)', // 分享链接
	    imgUrl: '#(img_domain)#(productDetail.product.image)', // 分享图标
        success: function () {
          // 设置成功
        }
	});
	

});
</script>


